<template>
	<div>
		<div class="head">
			<div @click="$router.push({path: '/'})" class="return"></div>
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<img class="logo" src="../../assets/images/logo.png" alt="">
				<div class="title-hd">欢迎登录</div>
				<div class="main">
					<group>
						<x-input placeholder="请输入手机号" :max="12" v-model.trim="Account" text-align="left" type="tel"></x-input>
					</group>
					<group>
						<x-input placeholder="请输入密码" v-model.trim="Pwd" text-align="left" type="password" :max="18"></x-input>
					</group>
				</div>
				<div class="btn">
					<x-button type="primary" :show-loading="loading" :disabled='loading' @click.native="Login">登录</x-button>
				</div>
				<div class="text">
					<flexbox>
						<flexbox-item>
							<div class="flex-demo tal">
								<router-link to="/FindPwd" tag="span">忘记密码？点击找回</router-link>
							</div>
						</flexbox-item>
						<flexbox-item>
							<div class="flex-demo tar">
								<router-link tag="span" to="/Register">我要注册</router-link>
							</div>
						</flexbox-item>
					</flexbox>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'vant';
	import { base } from './../../utils/api';
	let _this;
	export default {
		name: 'Login',
		data() {
			return {
				Account: '', // 账号
				Pwd: '', // 密码
				loading: false
			}
		},
		watch: { // 这里的验证请勿注释（如果要设置IOS不能输入中文，请更改type的值为email，安卓的话就需要下面的这些限制）
			Pwd: function() {
				this.Pwd = this.Pwd.replace(/[\u4e00-\u9fa5]/ig, ' '); // 密码不能输入中文（主要防止其他地方复制的中文粘贴过来）
			},
			Account: function() {
				this.Account = this.Account.replace(/[^\d]/g, ' '); // 因为帐号是手机号，手机号只能是数字，且中国电信手机号码最长为12位，上面不能限制为11位
			}
		},
		beforeCreate() {
			_this = this;
		},
		mounted() {
			this.$vux.loading.show({
				text: '加载中...'
			})
			// 热更新
			this.$nextTick(() => {
				setTimeout(() => {
					_this.checkUpdate(false);
				}, 1000);
			});
		},
		methods: {
			Login() {
				// 判断手机号码
				if(!this.Account) {
					Toast('手机号码不能为空');
					return false;
				}
				// 密码
				if(!this.Pwd) {
					Toast('密码不能为空');
					return false;
				} else {
					if(this.Pwd.length < 6 || this.Pwd.length > 18) {
						Toast('密码长度在6-18之间');
						return false;
					}
				}
				// 登录
				this.loading = true;
				this.axios.defaults.headers['Authorization'] = 'Basic bWMtYXBwOmRvZG91LW1j';
				base.getSignUp({
					'username': this.Account,
					'password': this.Pwd
				}).then(res => {
					if(res.code == 500) {
						this.loading = false;
					} else if(res.code == 200) {
						localStorage.token = res.data.token.access_token;
						localStorage.Account = this.Account;
						this.axios.defaults.headers['Authorization'] = 'bearer ' + localStorage.token;
						this.$router.push({
							path: '/'
						})
						this.loading = false;
					}
					Toast(res.msg);
				})
			},
			/**
			 * 检查更新
			 * @param {热更新是否提示更新对话框} tipsFlag
			 */
			checkUpdate(tipsFlag) {
				let $this = this;
				if(window.plus) {
					// 获取本地应用资源版本号
					plus.runtime.getProperty(plus.runtime.appid, function(inf) {
						// 检测更新url
						var checkUpdateUrl = process.env.API_HOST + "/apps/update.json";
						// 下载热更新文件
						var hotUpdateFileUrl = process.env.API_HOST + "/apps/H5E982717.wgt";
						// 本地版本号（已安装版本号）
						var localVer = inf.version;
						//			plus.nativeUI.showWaiting("检测更新...");
						var xhr = new XMLHttpRequest();
						xhr.onreadystatechange = function() {
							switch(xhr.readyState) {
								case 4:
									plus.nativeUI.closeWaiting();
									if(xhr.status == 200) {
										var resp = JSON.parse(xhr.responseText);
										var u = navigator.userAgent,
											app = navigator.appVersion;
										var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
										var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
										if(isAndroid) {
											var device = resp.android;
										}
										if(isiOS) {
											var device = resp.ios;
										}
										// 如果可更新
										if(device.canUpdate) {
											var remoteVer = device.ver;
											if(localVer && remoteVer) {
												// 先判断版本号，要不要更新
												var lvs = localVer.split('.');
												var rvs = remoteVer.split('.');
												for(var i = 0; i < lvs.length; i++) {
													// 如果本地版本号有一截比服务器的小，就停止比较
													if(Number(lvs[i]) < Number(rvs[i])) break;
												}
												// 如果i比lvs长度小，证明本地版本号有比服务器小的部分，提前停止了比较，就需要执行更新操作
												if(i < lvs.length) {
													if(device.isHotUpdate) { // 热更新
														if(tipsFlag) { // 如果要提示更新，就显示确定对话框
															alert('发现重要版本更新，为确保账户安全，请及时更新')
														}
														plus.nativeUI.showWaiting('下载热更新文件...');
														plus.downloader.createDownload(hotUpdateFileUrl, {
															filename: "_doc/update/"
														}, function(d, status) {
															if(status == 200) {
																var path = d.filename;
																// 更新应用资源
																plus.nativeUI.showWaiting('安装热更新文件...');
																plus.runtime.install(path, {}, function() {
																	plus.nativeUI.closeWaiting();
																	plus.runtime.restart();
																	plus.runtime.restart();
																}, function(e) {
																	plus.nativeUI.closeWaiting();
																	plus.nativeUI.alert('安装热更新文件失败' + "[" + e.code + "]：" + e.message);
																});
															} else {
																plus.nativeUI.alert('下载热更新文件失败');
															}
															plus.nativeUI.closeWaiting();
														}).start();
													} else { // 如果是冷更新，跳转到下载页下载安装
														$this.toColdUpdate(device.coldUpdateUrl)
													}
												}
											}
										}
									}
									break;
								default:
									break;
							}
						}
						xhr.open('GET', checkUpdateUrl);
						xhr.send();
					});
				}
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	.overlay {
		background: #fff;
	}
	
	.header {
		position: relative;
		height: 46px;
	}
	
	.close {
		position: absolute;
		top: 5px;
		left: 5px;
	}
	
	.title-hd {
		font-size: 20px;
		font-weight: bold;
		padding: 20px;
	}
	
	.weui-cells:after {
		left: 15px;
		right: 15px;
	}
	
	.weui-cells .weui-cell {
		padding: 15px 0;
	}
	
	.main {
		margin: 0 20px;
		border-radius: 10px;
		overflow: hidden;
	}
	
	.btn {
		padding: 20px;
	}
	
	.text {
		// color: #fff;
		padding: 20px;
		text-align: center;
		font-size: 13px;
	}
	
	.logo {
		width: 30%;
		display: block;
		margin: 10% auto;
	}
	
	.yzm {
		/deep/ .weui-cells .weui-cell {
			padding: 5px 0;
		}
	}
	
	input {
		padding: 15px 10px;
	}
	
	.head {
		background-color: transparent;
		width: 15%;
	}
	
	.head~.overlay {
		top: 0px;
	}
</style>